<template>
  <div class="navleft" v-if="!phoneStyle">
    <Modal
        v-model="exitDiv"
        title="退出登录"
        @on-ok="ok"
        @on-cancel="cancel">
      <p>是否退出登录</p>
    </Modal>
    <div class="icons-item" @click="exitDiv = true" style="height:72px;color:#ffffff;text-align:center;padding:20px 0 100px 0;"
         v-if="avatar==''">
      <Avatar icon="ios-person"/>
    </div>
    <div class="icons-item" @click="exitDiv = true" style="height:72px;color:#ffffff;text-align:center;padding:20px 0 100px 0;cursor: pointer" v-if="avatar">
      <Avatar :src="avatar"/>
    </div>
    <ul style="padding: 0!important;list-style: none!important;">
      <a href="javascript: void(0)" @click="toAdmin" class="icons-item" v-if="selected==1 && isAdmin == 1"
         style="background:#41A0ED;height:64px;color:#ffffff;text-align:center;padding:10px 0 10px 0;display: block;outline: 0;list-style: none;font-size: 12px;">
        <Icon type="ios-desktop" size="24" style="color:#ffffff;"/>
        <p>管理端</p>
      </a>
      <a href="javascript: void(0)" @click="toAdmin" class="icons-item" v-if="selected!=1 && isAdmin == 1"
         style="height:64px;color:#ffffff;text-align:center;padding:10px 0 10px 0;display: block;outline: 0;list-style: none;font-size: 12px;">
        <Icon type="ios-desktop" size="24" style="color:#ffffff;"/>
        <p>管理端</p>
      </a>


      <a href="javascript: void(0)" @click="toStaff" class="icons-item" v-if="selected==2"
         style="background:#41A0ED;height:64px;color:#ffffff;text-align:center;padding:10px 0 10px 0;display: block;outline: 0;list-style: none;font-size: 12px;">
        <Icon type="ios-people" size="24" style="color:#ffffff;"/>
        <p>员工端</p>
      </a>
      <a href="javascript: void(0)" @click="toStaff" class="icons-item" v-if="selected!=2"
         style="height:64px;color:#ffffff;text-align:center;padding:10px 0 10px 0;display: block;outline: 0;list-style: none;font-size: 12px;">
        <Icon type="ios-people" size="24" style="color:#ffffff;"/>
        <p>员工端</p>
      </a>


      <!--<a :href="'/item/question/questionDetail'" class="icons-item" v-if="selected==3"-->
         <!--style="background:#41A0ED;height:64px;color:#ffffff;text-align:center;padding:10px 0 10px 0;display: block;outline: 0;list-style: none;font-size: 12px;">-->
        <!--<Icon type="ios-help-circle" size="24" style="color:#ffffff;"/>-->
        <!--<p>问题管理</p>-->
      <!--</a>-->
      <!--<a :href="'/item/question/questionDetail?problemId=1&node=0'" class="icons-item" v-if="selected!=3"-->
         <!--style="height:64px;color:#ffffff;text-align:center;padding:10px 0 10px 0;display: block;outline: 0;list-style: none;font-size: 12px;">-->
        <!--<Icon type="ios-help-circle" size="24" style="color:#ffffff;"/>-->
        <!--<p>问题管理</p>-->
      <!--</a>-->

    </ul>
  </div>
  <div class="navleft_phone" v-else>
    <Modal
        v-model="exitDiv"
        title="退出登录"
        @on-ok="ok"
        @on-cancel="cancel">
      <p>是否退出登录</p>
    </Modal>
    <div class="np_con" @click="toAdmin">
      <div class="npc_photo">
        <img src="../assets/img/adminActive.png" v-if="selected == 1 && isAdmin == 1"/>
        <img src="../assets/img/admin.png" v-else/>
      </div>
      <div :class="selected == 1?'npc_text activeText':'npc_text nullText'">管理端</div>
    </div>
    <div class="np_con" @click="toStaff">
      <div class="npc_photo">
        <img src="../assets/img/staffActive.png" v-if="selected == 2"/>
        <img src="../assets/img/staff.png" v-else/>
      </div>
      <div :class="selected == 2?'npc_text activeText':'npc_text nullText'">员工端</div>
    </div>
    <div class="np_con" @click="exitDiv = true">
      <div class="npc_photo" v-if="avatar">
        <Avatar :src="avatar"/>
      </div>
      <div class="npc_photo" v-if="avatar==''">
        <Avatar icon="ios-person"/>
      </div>
      <div class="npc_text nullText">我的</div>
    </div>
  </div>
</template>

<script>
  import cookie from 'js-cookie'
  export default {
    name: 'NavLeft',
    props: {
      selected: Number,
      avatar: String
    },
    data() {
      return {
        exitDiv: false,
        selectValue: '',
        phoneStyle: false,
        isAdmin: cookie.get('isAdmin'),
        chooseDate: cookie.get('chooseDate'),
      }
    },
    watch: {
      selectValue(val) {
        let self = this
        localStorage.setItem('leftSelect', val)
      },
    },
    created() {
      let self = this
      let dw = document.body.clientWidth
      if (dw < 820) {
        self.phoneStyle = true
      } else {
        self.phoneStyle = false
      }
    },
    mounted() {
      let self = this
      self. selectValue = self.selected
    },
    methods: {
      ok () {
        this.exitDiv = false
        cookie.remove('chooseDate');
        cookie.remove('isAdmin');
        cookie.remove('uid');
        cookie.remove('token');
        this.$router.push('/')
      },
      cancel () {
        this.exitDiv = false
      },
      toStaff() {
        let self = this
        let str = {
          uid: cookie.get('uid'),
          ymd: this.chooseDate
        };
        this.$Loading.start();
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/info/huolist', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          localStorage.setItem('middleId', res.data.unit_id)
          localStorage.setItem('dwShow', true)
          cookie.set('loginType',2)
          self.$router.push({
            path: '/item/staff/',
            query: {id: res.data.unit_id}
          })
        }).catch(function (error) {
          // this.$Loading.finish();
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
        });
      },
      toAdmin() {
        let self = this
        cookie.set('loginType',1)
        self.$router.push({
          path: '/',
          query: {id: localStorage.getItem('middleId')}
        })
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  @media screen and (min-width: 0px) and (max-width: 850px) {
    .navleft {
      display: flex;
      flex-direction: row;
      .icons-item{
        padding: 0 !important;
        height: 50px !important;
        line-height: 50px;
        width: 20%;
      }
      ul{
        width: 80%;
        display: flex;
        flex-direction: row;
        a{
          display: flex;
          flex-direction: row !important;
          line-height: 2 !important;
        }
      }
    }
  }
  /* 手机竖屏 */
  @media screen and (min-width: 0px) and (max-width: 820px) {
    .navleft_phone{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      width: 100%;
      height: 50px;
      .np_con{
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .npc_photo{
          width: 22px;
          height: 22px;
          margin-left: auto;
          margin-right: auto;
          .ivu-avatar-image{
            width: 100%;
            height: 100%;
          }
          img{
            width: 100%;
            height: 100%;
          }
        }
        .npc_text{
          width: 100%;
          font-size: 12px;
          text-align: center;
        }
        .activeText{
          color: #467bbe;
        }
        .nullText{
          color: #999999;
        }
      }
    }
  }
</style>
